<form [formGroup]="userForm.form" (ngSubmit)="save()">
    <input name="foilautofill" style="display: none" type="password" />
    <sqx-layout layout="right" overflow="true" padding="true" white="true" width="30">
        <ng-container title>
            @if (usersState.selectedUser | async) {
                <sqx-title message="i18n:users.editPageTitle" />
                <h3>{{ "users.editTitle" | sqxTranslate }}</h3>
            } @else {
                <sqx-title message="i18n:users.createPageTitle" />
                <h3>{{ "users.createTitle" | sqxTranslate }}</h3>
            }
        </ng-container>
        <ng-container menu>
            @if (usersState.selectedUser | async; as user) {
                @if (isEditable) {
                    <button class="btn btn-primary" shortcut="CTRL + SHIFT + S" type="submit">{{ "common.save" | sqxTranslate }}</button>
                }
            } @else {
                <button class="btn btn-primary" shortcut="CTRL + SHIFT + S" type="submit">{{ "common.save" | sqxTranslate }}</button>
            }
        </ng-container>
        <ng-container>
            <sqx-form-error [error]="userForm.error | async" />
            <div class="form-group">
                <label for="email">
                    {{ "common.email" | sqxTranslate }} <small class="hint">({{ "common.requiredHint" | sqxTranslate }})</small>
                </label>
                <sqx-control-errors for="email" />
                <input class="form-control" id="email" autocomplete="off" formControlName="email" maxlength="100" type="email" />
            </div>

            <div class="form-group">
                <label for="displayName">
                    {{ "common.displayName" | sqxTranslate }} <small class="hint">({{ "common.requiredHint" | sqxTranslate }})</small>
                </label>
                <sqx-control-errors for="displayName" />
                <input class="form-control" id="displayName" autocomplete="off" formControlName="displayName" maxlength="100" spellcheck="false" />
            </div>

            <div class="form-group form-group-section">
                <div class="form-group">
                    <label for="password">{{ "common.password" | sqxTranslate }}</label>
                    <sqx-control-errors for="password" />
                    <input class="form-control" id="password" autocomplete="off" formControlName="password" maxlength="100" type="password" />
                </div>

                <div class="form-group">
                    <label for="password">{{ "common.passwordConfirm" | sqxTranslate }}</label>
                    <sqx-control-errors for="passwordConfirm" />
                    <input class="form-control" id="passwordConfirm" autocomplete="off" formControlName="passwordConfirm" maxlength="100" type="password" />
                </div>
            </div>

            <div class="form-group form-group-section">
                <label for="permissions">{{ "common.permissions" | sqxTranslate }}</label>
                <sqx-control-errors for="permissions" />
                <textarea
                    class="form-control"
                    id="permissions"
                    autocomplete="off"
                    formControlName="permissions"
                    placeholder="{{ 'common.separateByLine' | sqxTranslate }}"
                    spellcheck="false"></textarea>
            </div>
        </ng-container>
    </sqx-layout>
</form>
